<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <!-- 设置视口，确保在移动设备上正确显示 -->  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>车辆控制面板</title>  
    <style>  
        /* ========== 基础样式设置 ========== */  
        body {  
            font-family: Arial, sans-serif;  
            display: flex;  
            flex-direction: column;        /* 垂直排列 */  
            align-items: center;           /* 水平居中 */  
            padding: 20px;  
            background-color: #f0f0f0;     /* 浅灰色背景 */  
        }  
        
        /* 控制面板容器 - 使用Flexbox布局 */  
        .control-panel {  
            display: flex;  
            flex-wrap: wrap;               /* 允许换行 */  
            justify-content: center;       /* 水平居中 */  
            gap: 20px;                     /* 控制组之间的间距 */  
            margin-top: 20px;  
        }  
        
        /* 单个控制组的样式 */  
        .control-group {  
            background-color: white;  
            border-radius: 10px;           /* 圆角边框 */  
            padding: 10px;  
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* 阴影效果 */  
            width: 190px;                  /* 固定宽度 */  
        }  
        
        /* 标题样式 */  
        h2 {  
            text-align: center;  
            color: #333;  
        }  
        
        /* 数值显示区域 */  
        .value-display {  
            text-align: center;  
            font-size: 24px;  
            margin: 15px 0;  
            font-weight: bold;  
        }  
        
        /* 滑块控件样式 */  
        input[type="range"] {  
            width: 100%;  
            margin: 10px 0;  
        }  
        
        /* 挡位按钮网格布局 */  
        .gear-buttons {  
            display: grid;  
            grid-template-columns: repeat(4, 1fr);  /* 3列等宽布局 */  
            gap: 10px;  
            margin-top: 15px;  
        }  
        
        /* 通用按钮样式 */  
        button {  
            padding: 10px;  
            border: none;  
            border-radius: 5px;  
            background-color: #4CAF50;     /* 绿色背景 */  
            color: white;  
            cursor: pointer;  
            font-size: 16px;  
        }  
        
        /* 激活状态的按钮 */  
        button.active {  
            background-color: #2E7D32;     /* 深绿色表示激活 */  
        }  
        
        /* 禁用状态的按钮 */  
        button:disabled {  
            background-color: #cccccc;     /* 灰色表示禁用 */  
            cursor: not-allowed;  
        }  
        
        /* 启用/禁用控制按钮 */  
        .enable-button {  
            width: 100%;  
            margin-top: 10px;  
            font-size: 14px;  
        }  
        
        /* 启用状态的控制按钮 */  
        .enable-button.enabled {  
            background-color: #4CAF50;     /* 绿色表示启用 */  
        }  
        
        /* 禁用状态的控制按钮 */  
        .enable-button.disabled {  
            background-color: #f44336;     /* 红色表示禁用 */  
        }  
        
        /* 控制器禁用时的样式 */  
        .control-disabled {  
            opacity: 0.5;                  /* 半透明效果 */  
            pointer-events: none;          /* 禁用所有鼠标事件 */  
        }  
         
        
        /* 连接状态显示区域 */  
        .connection-status {  
            margin-top: 20px;  
            padding: 4px 5px;  
            border-radius: 5px;  
            font-weight: bold;  
            font-size: 14px;
        }  
        
        /* 连接成功状态 */  
        .connected {  
           /* 绿色表示连接成功 */  
            color: #4CAF50;  
        }  
        
        /* 连接失败状态 */  
        .disconnected {  
             /* 红色表示连接失败 */  
            color: #f44336;  
        }  

        .invalid {  
            background-color: #dcb803;     /* 红色表示连接失败 */  
            color: white;  
        }  

        /* 状态组容器 - 横向布局 */
        .status-sections-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        /* 单个状态组 */
        .status-section {
            flex: 1;
            min-width: 160px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        /* 状态组标题 */
        .status-section h3 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #333;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        /* 状态项 */
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding: 5px 0;
        }

        /* 状态标签 */
        .status-label {
            font-weight: bold;
            color: #555;
            min-width: 60px;
        }

        /* 状态值 */
        .status-value {
            color: #007bff;
            font-weight: bold;
        }

        .status-invalid {  
            color: #f44336;  
            font-weight: bold;  
        }  

        /* 禁用状态 */
        .status-disabled {
            color: #dc3545;
            font-weight: bold;
        }

        .status-enabled {  
            color: #4CAF50;  
            font-weight: bold;  
        }  

        .mode-driving {  
            color: #ff9100;  
            font-weight: bold;  
        }  

        /* 响应式设计 */
        /* @media (max-width: 1200px) {
            .status-sections-container {
                flex-direction: column;
            }
            
            .status-section {
                min-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .status-sections-container {
                gap: 15px;
            }
            
            .status-section {
                padding: 10px;
            }
        } */

        .switch-label {
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 30px;
        }

        /* 连接状态指示 */
        .status-indicator {
            margin: 20px 0;
            padding: 15px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }


        .status-indicator.connecting {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        .status-indicator.connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

    </style>  
</head>  
<body>  
    <!-- 页面标题 -->  
    <h2>车辆控制面板</h2>  
    
     <!-- ========== 车辆状态显示组 ========== -->  
    <div class="vehicle-status-group">  
        <!-- <h2>车辆状态</h2>   -->
        
        <!-- 状态组容器 -->
        <div class="status-sections-container">
            <!-- 底盘实际状态 -->  
            <div class="status-section">  
                <h3>底盘状态</h3>  
                <div class="status-item">  
                    <span class="status-label">车速:</span>  
                    <span class="status-value" id="status-speed">-- m/s</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-value" id="status-steering-angle">-- °</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-value" id="status-gear">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-value" id="status-brake-pedal">-- %</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-value" id="status-throttle-pedal">-- %</span>  
                </div>  
            </div>  

            <!-- 物理输入 -->  
            <div class="status-section">  
                <h3>物理输入</h3>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-value" id="status-steering-angle">-- %</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-value" id="status-gear">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-value" id="status-brake-pedal">-- °</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-value" id="status-throttle-pedal">-- %</span>  
                </div>  
            </div>  

            <!-- 程序输入 -->  
            <div class="status-section">  
                <h3>程序输入(VS)</h3>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-value" id="status-steering-angle">-- %</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-value" id="status-gear">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-value" id="status-brake-pedal">-- °</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-value" id="status-throttle-pedal">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位拒绝:</span>  
                    <span class="status-value" id="status-throttle-pedal">--</span>  
                </div>  
            </div>  

            <!-- 接管状态 -->  
            <div class="status-section">  
                <h3>接管状态</h3>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-value" id="status-steering-angle">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-value" id="status-gear">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-value" id="status-brake-pedal">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-value" id="status-throttle-pedal">--</span>  
                </div>  
            </div>  

            <!-- 握手状态 -->  
            <div class="status-section">  
                <h3>握手状态</h3>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-value" id="status-steering-angle">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-value" id="status-gear">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-value" id="status-brake-pedal">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-value" id="status-throttle-pedal">--</span>  
                </div>  
            </div>  
            
            <!-- 车身状态 -->  
            <!-- <div class="status-section">  
                <h3>车身状态</h3>  
                <div class="status-item">  
                    <span class="status-label">车门:</span>  
                    <div>  
                        <span class="door-status door-closed" id="driver-door"></span>驾驶员  
                        <span class="door-status door-closed" id="passenger-door"></span>乘客  
                    </div>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">灯光:</span>  
                    <div>  
                        <span class="light-status light-off" id="headlights"></span>前灯  
                        <span class="light-status light-off" id="taillights"></span>尾灯  
                    </div>  
                </div>  
            </div>   -->
            
            <!-- 控制状态 -->  
            <div class="status-section">  
                <h3>前端控制指令</h3>  
                <div class="status-item">  
                    <span class="status-label">油门:</span>  
                    <span class="status-disabled" id="control-throttle-status">-- | 禁用</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">刹车:</span>  
                    <span class="status-disabled" id="control-brake-status">--  | 禁用</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">方向盘:</span>  
                    <span class="status-disabled" id="control-steering-status">-- | 禁用</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">挡位:</span>  
                    <span class="status-disabled" id="control-gear-status">-- |  禁用</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">驾驶模式:</span>  
                    <span class="status-value" id="control-driving-mode">-- | 泊车</span>  
                </div>  
            </div>  
            
            <!-- websocket系统状态 -->  
            <div class="status-section">  
                <h3>websocket状态</h3>  
                <div class="status-item">  
                    <span class="status-label">服务器:</span>  
                    <span class="status-disabled" id="server-status">离线</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">连接数:</span>  
                    <span class="status-value" id="connected-clients">0</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">数据序号:</span>  
                    <span class="status-value" id="data-sequence">--</span>  
                </div>  
                <div class="status-item">  
                    <span class="status-label">更新时间:</span>  
                    <span class="status-value" id="last-update">--</span>  
                </div>  
            </div>
        </div>
    </div>



    <!-- 主要控制面板区域 -->  
    <div class="control-panel">  

        <!-- ========== 全局控制组 ========== -->  


        <div class="control-group">  
            <!-- IP地址输入控制 -->  
            <div id="ip-input" class="control-enabled">  
                <div class="input-group">
                    <label for="ip-address">IP地址 ws://</label>
                    <input type="text" id="ip-address" placeholder="192.168.1.100" value="">  
                </div>
                <div class="input-group">
                    <label for="port-number">端口</label>
                    <input type="number" id="port-number" placeholder="8080" value="8080" min="1" max="65535">  
                </div>
            </div>  
            <!-- 连接控制按钮 -->  
            <div class="button-group">  
                <!-- 滑块开关 -->
                <div class="switch-container">
                    <span class="switch-label">连接：</span>
                    <label class="switch">
                        <input type="checkbox" id="connection-toggle">
                        <!-- <span class="slider"></span> -->
                    </label>
                    <!-- 连接状态指示 -->
                    <span class="connect-status-text disconnected", id="connect-status-text">未连接</span>
                </div>
            </div>  

            <!-- 连接状态显示 -->  
            <div class="connection-status disconnected" id="connection-status">未连接</div>  

            <!-- 连接说明 -->  
            <div style="margin-top: 20px; font-size: 12px; color: #666; text-align: center;">  
                <p>格式: IP:端口 (例: ws://192.168.1.100:8080)</p>  
            </div>  
        </div>

        
        <!-- ========== 油门控制组 ========== -->  
        <div class="control-group">  
            <h2>油门</h2>  
            <!-- 当前油门值显示 -->  
            <div class="value-display" id="throttle-value">0.0</div>  
            <!-- 油门控制滑块，默认禁用 -->  
            <div id="throttle-controls" class="control-disabled">  
                <input type="range" id="throttle" min="0" max="1" step="0.01" value="0">  
            </div>  
            <!-- 油门启用/禁用按钮 -->  
            <button class="enable-button disabled" id="throttle-enable">油门已禁用</button>  
            <!-- 键盘控制说明 -->  
            <div style="margin-top: 20px; font-size: 12px; color: #666; text-align: center;">  
                <p>快捷键 W/S：油门 | Q：禁用油门</p>  
            </div>  

        </div>  
        
        <!-- ========== 刹车控制组 ========== -->  
        <div class="control-group">  
            <h2>刹车</h2>  
            <!-- 当前刹车值显示 -->  
            <div class="value-display" id="brake-value">0.0</div>  
            <!-- 刹车控制滑块，默认禁用 -->  
            <div id="brake-controls" class="control-disabled">  
                <input type="range" id="brake" min="0" max="1" step="0.01" value="0">  
            </div>  
            <!-- 刹车启用/禁用按钮 -->  
            <button class="enable-button disabled" id="brake-enable">刹车已禁用</button>  
            <!-- 键盘控制说明 -->  
            <div style="margin-top: 20px; font-size: 12px; color: #666; text-align: center;">  
                <p>快捷键 A/D：刹车 | E：禁用刹车</p>  
            </div>  

        </div>  
        
        <!-- ========== 方向盘控制组 ========== -->  
        <div class="control-group">  
            <h2>方向盘</h2>  
            <!-- 当前方向盘转角显示 -->  
            <div class="value-display" id="steering-value">0.0</div>  
            <!-- 方向盘控制区域，默认禁用 -->  
            <div id="steering-controls" class="control-disabled">  
                <!-- 方向盘转角滑块 (-1到1，对应左转到右转) -->  
                <input type="range" id="steering" min="-1" max="1" step="0.01" value="0">  
                <!-- 方向盘视觉效果 -->  
                <!-- <div class="steering-wheel" id="steering-wheel"></div>   -->
            </div>  
            <!-- 方向盘启用/禁用按钮 -->  
            <button class="enable-button disabled" id="steering-enable">方向盘已禁用</button>  

            <!-- 键盘控制说明 -->  
            <div style="margin-top: 20px; font-size: 12px; color: #666; text-align: center;">  
                <p>快捷键  ←/→：方向盘  </p>  
            </div>  

        </div>  
        
        <!-- ========== 挡位控制组 ========== -->  
        <div class="control-group">  
            <h2>挡位</h2>  
            <!-- 当前挡位显示 -->  
            <div class="value-display" id="gear-value">NONE</div>  
            <!-- 泊车状态显示 -->  
            <!-- <div class="value-display" id="parking-status" style="font-size: 16px; color: #4CAF50; margin-top: 5px;">已泊车</div>   -->
            <!-- 挡位按钮组，默认禁用 -->  
            <div id="gear-controls" class="control-disabled">  
                <div class="gear-buttons">  
                    <button id="gear-p">P</button>     <!-- 驻车挡 -->  
                    <button id="gear-r">R</button>     <!-- 倒挡 -->  
                    <button id="gear-d">D</button>     <!-- 前进挡 -->  
                    <button id="gear-none" class="active">NONE</button>  <!-- 空挡，默认激活 -->  
                </div>  
            </div>  
            <!-- 挡位启用/禁用按钮 -->  
            <button class="enable-button disabled" id="gear-enable">挡位已禁用</button>  
            
            <!-- 键盘控制说明 -->  
            <div style="margin-top: 20px; font-size: 12px; color: #666; text-align: center;">  
  
            </div>  
        </div>  
        
        <!-- ========== 驾驶模式控制组 ========== -->  
        <div class="control-group">  
            <h2>驾驶模式</h2>  
            <!-- 当前驾驶模式显示 -->  
            <div class="value-display" id="drive-mode">泊车模式</div>  
            <!-- 模式切换按钮 -->  
            <button id="mode-toggle" style="width: 100%; padding: 15px; margin: 15px 0; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;">  
                切换到行车模式  
            </button>  

            <!-- 新增：泊车状态选择器 -->
            <div id="parking-status-selector" class="parking-status-selector">
                <h3>泊车状态</h3>
                <div class="parking-status-buttons">
                    <button id="parking-in-progress" class="parking-button active pulse">泊入进行中</button>
                    <button id="parking-completed" class="parking-button complete">泊入完成</button>
                </div>
            </div>


            <!-- 模式描述 -->  
            <div style="font-size: 12px; color: #666; text-align: center; margin-top: 10px;">  
                <div id="mode-description">车辆已停止，可进行泊车操作</div>  
            </div>  
        </div>  

       

    </div>  
    
    
    
    <script>  
        // ========== DOM元素获取 ==========  
        // 获取所有控制相关的DOM元素引用  
        
        // 油门控制元素  
        const throttleSlider = document.getElementById('throttle');  
        const throttleValue = document.getElementById('throttle-value');  
        
        // 刹车控制元素  
        const brakeSlider = document.getElementById('brake');  
        const brakeValue = document.getElementById('brake-value');  
        
        // 方向盘控制元素  
        const steeringSlider = document.getElementById('steering');  
        const steeringValue = document.getElementById('steering-value');  
        
        // 挡位控制元素  
        const gearButtons = {  
            'P': document.getElementById('gear-p'),  
            'R': document.getElementById('gear-r'),  
            'NONE': document.getElementById('gear-none'),  
            'D': document.getElementById('gear-d')  
        };  
        const gearValue = document.getElementById('gear-value');  
        // const parkingStatus = document.getElementById('parking-status');  
        
        // 连接状态元素  
        const connectionStatus = document.getElementById('connection-status');  
        
        // 驾驶模式相关元素  
        const driveMode = document.getElementById('drive-mode');  
        const modeToggleBtn = document.getElementById('mode-toggle');  
        const modeDescription = document.getElementById('mode-description');  
        
        // 启用/禁用按钮  
        const throttleEnable = document.getElementById('throttle-enable');  
        const brakeEnable = document.getElementById('brake-enable');  
        const steeringEnable = document.getElementById('steering-enable');  
        const gearEnable = document.getElementById('gear-enable');  
        
        // 控制容器（用于禁用时的视觉效果）  
        const throttleControls = document.getElementById('throttle-controls');  
        const brakeControls = document.getElementById('brake-controls');  
        const steeringControls = document.getElementById('steering-controls');  
        const gearControls = document.getElementById('gear-controls');  


        // ========== 新增：车辆状态显示元素 ==========  

        //  ip和端口输入
        const ipAddressInput = document.getElementById('ip-address');
        const portNumberInput = document.getElementById('port-number');
        const connectButton = document.getElementById('connect-button');
        const resetButton = document.getElementById('reset-button');
        
        // 底盘状态元素  
        const statusSpeed = document.getElementById('status-speed');  
        const statusSteeringAngle = document.getElementById('status-steering-angle');  
        const statusGear = document.getElementById('status-gear');  
        const statusBrakePedal = document.getElementById('status-brake-pedal');  
        const statusThrottlePedal = document.getElementById('status-throttle-pedal');  
        
        // 车身状态元素  
        // const driverDoor = document.getElementById('driver-door');  
        // const passengerDoor = document.getElementById('passenger-door');  
        // const headlights = document.getElementById('headlights');  
        // const taillights = document.getElementById('taillights');  
        
        // 控制状态元素  
        const controlThrottleStatus = document.getElementById('control-throttle-status');  
        const controlBrakeStatus = document.getElementById('control-brake-status');  
        const controlSteeringStatus = document.getElementById('control-steering-status');  
        const controlGearStatus = document.getElementById('control-gear-status');  
        const controlDrivingMode = document.getElementById('control-driving-mode');  
        
        // websocket系统状态元素  
        const serverStatus = document.getElementById('server-status');  
        const connectedClients = document.getElementById('connected-clients');  
        const dataSequence = document.getElementById('data-sequence');  
        const lastUpdate = document.getElementById('last-update');  

        // 连接元素
        const connectToggle = document.getElementById("connection-toggle");
        const connectStatusText = document.getElementById("connect-status-text");
        const ipInput = document.getElementById("ip-input");


        
        // ========== 应用状态变量 ==========  
        
        // 当前挡位状态（默认为NONE，与C++后端保持一致）  
        let currentGear = 'NONE';  
        
        // WebSocket连接状态  
        let isConnected = false;  
        
        // 驾驶模式状态 (false=泊车模式, true=行车模式)  
        let isDrivingMode = false;  
        
        // 各控制器的启用状态 - 默认全部禁用（安全考虑）  
        let enableStates = {  
            throttle: false,    // 油门禁用  
            brake: false,       // 刹车禁用  
            steering: false,    // 方向盘禁用  
            gear: false         // 挡位禁用  
        };  

        // 连接的初始状态
        connectToggle.checked = false;


        

        /**
         * @brief 验证IP地址格式
         * @param {string} ip - IP地址字符串
         * @returns {boolean} - 是否为有效的IP地址
         */
        function validateIPAddress(ip) {
            if (!ip || ip.trim() === '') {
                return false;
            }
            
            // IPv4地址正则表达式
            const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            
            // 支持localhost
            if (ip.toLowerCase() === 'localhost') {
                return true;
            }
 
            return ipv4Regex.test(ip) ;
        }




        /**
         * @brief 验证端口号
         * @param {string|number} port - 端口号
         * @returns {boolean} - 是否为有效的端口号
         */
        function validatePort(port) {
            const portNum = parseInt(port);
            return !isNaN(portNum) && portNum >= 1 && portNum <= 65535;
        }



        // ========== 车辆状态更新函数 ==========  
        
        /**  
         * @brief 更新车辆状态显示  
         * @param {Object} statusData - 从WebSocket接收的状态数据  
         *   
         * 解析并显示车辆状态信息，包括：  
         * - 底盘状态（车速、方向盘、挡位、刹车、油门）  
         * - 车身状态（车门、灯光）  
         * - 控制状态（各控制器启用状态）  
         * - websocket系统状态（服务器状态、连接数）  
         */  
        function updateVehicleStatusDisplay(statusData) {  
            try {  
                // ========== 更新底盘状态 ==========  
                if (statusData.chassis) {  
                    const chassis = statusData.chassis;  
                    
                    // 更新车速  
                    if (chassis.speed) {  
                        const speed = chassis.speed.vehicle_speed;  
                        const speedValid = chassis.speed.speed_valid;  
                        statusSpeed.textContent = speedValid ?   
                            `${speed.toFixed(2)} m/s` :   
                            'N/A';  
                        statusSpeed.className = speedValid ? 'status-value' : 'status-value status-invalid';  
                    }  
                    
                    // 更新方向盘转角  
                    if (chassis.steering) {  
                        const angle = chassis.steering.angle;  
                        const angleValid = chassis.steering.angle_valid;  
                        statusSteeringAngle.textContent = angleValid ?   
                            `${angle.toFixed(1)}°` :   
                            'N/A';  
                        statusSteeringAngle.className = angleValid ? 'status-value' : 'status-value status-invalid';  
                    }  
                    
                    // 更新挡位  
                    if (chassis.gear) {  
                        const gear = chassis.gear.current_gear;  
                        const gearValid = chassis.gear.gear_valid;  
                        statusGear.textContent = gearValid ? gear : 'N/A';  
                        statusGear.className = gearValid ? 'status-value' : 'status-value status-invalid';  
                    }  
                    
                    // 更新刹车踏板  
                    if (chassis.brake) {  
                        const brake = chassis.brake.brake_pedal;  
                        const brakeValid = chassis.brake.brake_valid;  
                        statusBrakePedal.textContent = brakeValid ?   
                            `${brake.toFixed(1)}%` :   
                            'N/A';  
                        statusBrakePedal.className = brakeValid ? 'status-value' : 'status-value status-invalid';  
                    }  
                    
                    // 更新油门踏板  
                    if (chassis.throttle) {  
                        const throttle = chassis.throttle.throttle_pedal;  
                        const throttleValid = chassis.throttle.throttle_valid;  
                        statusThrottlePedal.textContent = throttleValid ?   
                            `${throttle.toFixed(1)}%` :   
                            'N/A';  
                        statusThrottlePedal.className = throttleValid ? 'status-value' : 'status-value status-invalid';  
                    }  
                }  
                
                // ========== 更新车身状态 ==========  
                // if (statusData.body) {  
                //     const body = statusData.body;  
                    
                //     // 更新车门状态  
                //     if (body.doors) {  
                //         const doors = body.doors;  
                        
                //         // 驾驶员车门  
                //         if (doors.driver_door !== undefined) {  
                //             driverDoor.className = doors.driver_door ?   
                //                 'door-status door-open' :   
                //                 'door-status door-closed';  
                //             driverDoor.title = doors.driver_door ? '驾驶员门已开' : '驾驶员门已关';  
                //         }  
                        
                //         // 乘客车门  
                //         if (doors.passenger_door !== undefined) {  
                //             passengerDoor.className = doors.passenger_door ?   
                //                 'door-status door-open' :   
                //                 'door-status door-closed';  
                //             passengerDoor.title = doors.passenger_door ? '乘客门已开' : '乘客门已关';  
                //         }  
                //     }  
                    
                //     // 更新灯光状态  
                //     if (body.lights) {  
                //         const lights = body.lights;  
                        
                //         // 前灯  
                //         if (lights.headlights !== undefined) {  
                //             headlights.className = lights.headlights ?   
                //                 'light-status light-on' :   
                //                 'light-status light-off';  
                //             headlights.title = lights.headlights ? '前灯已开' : '前灯已关';  
                //         }  
                        
                //         // 尾灯  
                //         if (lights.taillights !== undefined) {  
                //             taillights.className = lights.taillights ?   
                //                 'light-status light-on' :   
                //                 'light-status light-off';  
                //             taillights.title = lights.taillights ? '尾灯已开' : '尾灯已关';  
                //         }  
                //     }  
                // }  
                
                // ========== 更新前端控制指令 ==========  
                if (statusData.html_report) {  
                    const controlStatus = statusData.html_report;  
                    
                    // 更新各控制器启用状态  
                    if (controlStatus.throttle_enabled !== undefined) {  
                        const throttle_value = controlStatus.throttle_commend;
                        controlThrottleStatus.textContent = controlStatus.throttle_enabled ? parseFloat(throttle_value).toFixed(2) +' | 启用' : '-- | 禁用';  
                        controlThrottleStatus.className = controlStatus.throttle_enabled ? 'status-enabled' : 'status-disabled';  
                    }  
                    
                    if (controlStatus.brake_enabled !== undefined) {  
                        const brake_value = controlStatus.brake_commend;
                        controlBrakeStatus.textContent = controlStatus.brake_enabled ? parseFloat(brake_value).toFixed(2) +' | 启用' : '-- | 禁用';  
                        controlBrakeStatus.className = controlStatus.brake_enabled ? 'status-enabled' : 'status-disabled';  
                    }  
                    
                    if (controlStatus.steering_enabled !== undefined) {  
                        const steering_value = controlStatus.steering_commend;
                        controlSteeringStatus.textContent = controlStatus.steering_enabled ? parseFloat(steering_value).toFixed(2) +' | 启用' : '-- | 禁用';  
                        controlSteeringStatus.className = controlStatus.steering_enabled ? 'status-enabled' : 'status-disabled';  
                    }  
                    
                    if (controlStatus.gear_enabled !== undefined) {  
                        const gear_value = controlStatus.gear_commend;
                        controlGearStatus.textContent = controlStatus.gear_enabled ? gear_value +' | 启用' : '-- | 禁用';  
                        controlGearStatus.className = controlStatus.gear_enabled ? 'status-enabled' : 'status-disabled';  
                    }  
                    
                    // 更新驾驶模式  
                    if (controlStatus.driving_mode !== undefined) {  
                        if (controlStatus.driving_mode === "driving") {
                            controlDrivingMode.textContent = '行车';
                            controlDrivingMode.style.color = '#ff9800';  // 橙色  
                        } else if (controlStatus.driving_mode === "parking") {
                            controlDrivingMode.textContent = '泊车';
                            controlDrivingMode.style.color = '#4CAF50';  // 绿色
                        } else if (controlStatus.driving_mode === "none") {
                            controlDrivingMode.textContent = "手动";
                            controlDrivingMode.className = 'status-value';  
                        } else {
                            controlDrivingMode.textContent = 'N/A';
                            controlDrivingMode.className = 'status-invalid'
                        }
                        
                    }  
                }  
                
                // ========== 更新websocket系统状态 ==========  
                if (statusData.websocket_status) {  
                    const systemStatus = statusData.websocket_status;  
                    
                    // 更新服务器状态  
                    if (systemStatus.server_running !== undefined) {  
                        serverStatus.textContent = systemStatus.server_running ? '在线' : '离线';  
                        serverStatus.className = systemStatus.server_running ? 'status-enabled' : 'status-disabled';  
                    }  
                    
                    // 更新连接客户端数量  
                    if (systemStatus.connected_clients !== undefined) {  
                        connectedClients.textContent = systemStatus.connected_clients.toString();  
                        connectedClients.className = 'status-value';  
                    }  
                }  
                
                // ========== 更新通用信息 ==========  
                
                // 更新数据序号  
                if (statusData.seq !== undefined) {  
                    dataSequence.textContent = statusData.seq.toString();  
                }  
                
                // 更新时间戳  
                if (statusData.timestamp !== undefined) {  
                    const date = new Date(statusData.timestamp * 1000);  
                    lastUpdate.textContent = date.toLocaleTimeString();  
                }  
                
            } catch (error) {  
                console.error('更新车辆状态显示时发生错误:', error);  
            }  
        }  

        
        // ========== WebSocket连接管理 ==========  
        
        let socket;  // WebSocket连接对象  

        
                /**  
         * @brief 建立WebSocket连接  
         *   
         * 尝试连接到多个可能的服务器地址：  
         * 1. 10.21.103.150:8080 (指定的服务器地址)  
         * 2. localhost:8080 (本地环回)  
         * 3. 127.0.0.1:8080 (本地IP)  
         *   
         * 如果一个地址失败，自动尝试下一个地址  
         * 连接失败后会自动重连  
         */  
        function connect() {  
            // 定义多个备选服务器地址  
            // const serverAddresses = [  
            //     'ws://10.21.162.157:8080'  // 主服务器地址  
            // ];  

            // 获取输入ip和端口
            const ip = ipAddressInput.value.trim();
            const port = portNumberInput.value.trim();

            // 验证输入
            if (!validateIPAddress(ip)) {
                connectStatusText.textContent = "无效输入";
                console.log("ip无效: ",ip);
                setTimeout(() => {connectStatusText.className = 'invalid'}, 100); // 闪一下
                connectStatusText.className = "disconnected"; 
                connectToggle.checked = false;
                ipInput.className = 'control-enabled'
                return;
            }
            if (!validatePort(port)) {
                connectStatusText.textContent = "无效输入";
                console.log("端口无效: ",port);
                setTimeout(() => {connectStatusText.className = 'invalid'}, 100); // 闪一下
                connectStatusText.className = "disconnected"; 
                connectToggle.checked = false;
                ipInput.className = 'control-enabled'
                return;
            }

            // connectStatusText.textContent = "已输入"

            const wsUrl = `ws://${ip}:${port}`;
            const serverAddresses = [
                wsUrl
            ];

                    
            let currentAddressIndex = 0;  // 当前尝试的地址索引  
            
            /**  
             * @brief 尝试连接到当前索引的服务器地址  
             */  
            function tryConnect() {  
                // 如果所有地址都尝试失败，重置索引并延迟重连  
                if (currentAddressIndex >= serverAddresses.length) {  
                    console.error("所有服务器地址都无法连接");  
                    connectionStatus.textContent = "连接失败";  
                    connectionStatus.className = "connection-status disconnected";  
                    currentAddressIndex = 0;  // 重置索引  
                    console.log("ip数量：",serverAddresses.length);
                    setTimeout(connect, 2000);  // 2秒后重新尝试  
                    return;  
                }  
                
                const wsUrl = serverAddresses[currentAddressIndex];  
                console.log(`尝试连接到: ${wsUrl}`);  
                connectionStatus.textContent = `连接中... (${wsUrl})`;  
                
                // 创建WebSocket连接  
                socket = new WebSocket(wsUrl);  
            
                /**  
                 * @brief WebSocket连接成功事件处理  
                 */  
                socket.onopen = function(e) {  
                    console.log(`连接已建立: ${wsUrl}`);  
                    isConnected = true;  
                    connectStatusText.textContent = "已连接";
                    connectStatusText.className = "connected";
                    ipInput.className = 'control-disabled'
                    connectionStatus.textContent = `已连接 (${wsUrl})`;  
                    connectionStatus.className = "connection-status connected";  
                };  
                
                /**  
                 * @brief WebSocket连接关闭事件处理  
                 */  
                socket.onclose = function(e) {  
                    console.log(`连接已关闭: ${wsUrl}`);  
                    isConnected = false;  

                    connectStatusText.textContent = "未连接";
                    connectStatusText.className = "disconnected";
                    ipInput.className = 'control-enabled'

                    connectToggle.checked = false;
                     
                    connectionStatus.textContent = `连接中断 (${wsUrl})`;
                    connectionStatus.className = "connection-status disconnected";  
                    currentAddressIndex++;  // 尝试下一个地址  
                    // setTimeout(tryConnect, 1000);  // 1秒后重试  
                };  
                
                /**  
                 * @brief WebSocket连接错误事件处理  
                 */  
                socket.onerror = function(error) {  
                    console.error(`WebSocket错误 (${wsUrl}):`, error);  
                    currentAddressIndex++;  // 尝试下一个地址  
                    connectionStatus.textContent = "连接中断"; 
                    // setTimeout(tryConnect, 1000);  // 1秒后重试  
                };  
                
                /**  
                 * @brief WebSocket消息接收事件处理 
                 *   
                 * 处理来自C++后端的消息：  
                 * - 控制命令确认  
                 * - 车辆状态更新  
                 * - 服务器状态信息  
                 */  
                socket.onmessage = function(event) {  
                    // TODO: 这里可以添加处理来自后端的状态更新消息  
                    // 例如：实时显示车辆状态、处理服务器响应等  
                    try {  
                        const message = JSON.parse(event.data);  
                        console.log("收到消息:", message);  
                        
                        // 根据消息类型处理不同的消息  
                        switch(message.type) {  
                            case 'vehicle_status':  
                                // 处理车辆状态消息  
                                updateVehicleStatusDisplay(message);  
                                break;  
                                
                            case 'welcome':  
                                // 处理欢迎消息  
                                console.log('服务器欢迎消息:', message.message);  
                                break;  
                                
                            case 'received':  
                                // 处理控制命令确认消息  
                                console.log('控制命令已确认:', message.echo);  
                                break;  
                                
                            case 'error':  
                                // 处理错误消息  
                                console.error('服务器错误:', message.message);  
                                break;  
                                
                            default:  
                                console.log('未知消息类型:', message.type);  
                        }  
                    } catch (error) {  
                        console.error('解析WebSocket消息时出错:', error);  
                        console.log('原始消息:', event.data);  
                    }  
                };  

            }  
            
            tryConnect();  // 开始尝试连接  
        }  
        
        // 页面加载时初始化连接  
        connect();  


        /**
         * @brief 断开WebSocket连接
         */
        function disconnect() {
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.close(1000, 'User disconnected'); // 正常关闭
            }
            
            socket = null;
            isConnected = false;
            // updateStatus('未连接', 'disconnected');

            connectStatusText.textContent = "未连接";

        }
        
        // ========== 数据发送功能 ==========  
        
        /**  
         * @brief 发送控制数据到C++后端  
         *   
         * 构建包含所有控制信息的JSON对象并发送给后端：  
         * - 油门、刹车、方向盘、挡位的当前值  
         * - 各控制器的启用状态  
         * - 驾驶模式信息  
         * - 时间戳  
         */  
        function sendControlData() {  
            if (!isConnected) return;  // 未连接时不发送数据  
            
            // 构建控制数据对象  
            const controlData = {  
                // 控制值：如果控制器禁用，则发送0或安全值  
                throttle: enableStates.throttle ? parseFloat(throttleSlider.value) : 0.0,  
                brake: enableStates.brake ? parseFloat(brakeSlider.value) : 0.0,  
                steering: enableStates.steering ? parseFloat(steeringSlider.value) : 0.0,  
                gear: enableStates.gear ? currentGear : 'NONE',  
                
                // 时间戳  
                timestamp: Date.now(),  
                
                // 启用状态  
                enabled: enableStates,  
                
                // 驾驶模式  
                driving_mode: isDrivingMode,  
                mode_type: isDrivingMode ? "driving" : "parking"  
            };  
            
            // 发送JSON数据到后端  
            socket.send(JSON.stringify(controlData));  
        }  
        
        // ========== 控制器启用/禁用管理 ==========  
        
        /**  
         * @brief 切换指定控制器的启用状态  
         * @param controlType 控制器类型 ('throttle', 'brake', 'steering', 'gear')  
         */  
        function toggleControl(controlType) {  
            enableStates[controlType] = !enableStates[controlType];  // 切换状态  
            updateControlUI(controlType);  // 更新UI显示  
            sendControlData();  // 发送更新后的数据  
        }  
        
        /**  
         * @brief 更新控制器的UI显示状态  
         * @param controlType 控制器类型  
         *   
         * 根据启用状态更新：  
         * - 按钮文本和颜色  
         * - 控制区域的可用性  
         * - 禁用时重置控制值  
         */  
        function updateControlUI(controlType) {  
            const isEnabled = enableStates[controlType];  
            
            switch(controlType) {  
                case 'throttle':  
                    // 更新油门控制UI  
                    throttleEnable.textContent = isEnabled ? '油门已启用' : '油门已禁用';  
                    throttleEnable.className = `enable-button ${isEnabled ? 'enabled' : 'disabled'}`;  
                    throttleControls.className = isEnabled ? '' : 'control-disabled';  
                    
                    // 禁用时重置为0  
                    if (!isEnabled) {  
                        throttleSlider.value = 0;  
                        throttleValue.textContent = '0.0';  
                    }  
                    break;  
                    
                case 'brake':  
                    // 更新刹车控制UI  
                    brakeEnable.textContent = isEnabled ? '刹车已启用' : '刹车已禁用';  
                    brakeEnable.className = `enable-button ${isEnabled ? 'enabled' : 'disabled'}`;  
                    brakeControls.className = isEnabled ? '' : 'control-disabled';  
                    
                    // 禁用时重置为0  
                    if (!isEnabled) {  
                        brakeSlider.value = 0;  
                        brakeValue.textContent = '0.0';  
                    }  
                    break;  
                    
                case 'steering':  
                    // 更新方向盘控制UI  
                    steeringEnable.textContent = isEnabled ? '方向盘已启用' : '方向盘已禁用';  
                    steeringEnable.className = `enable-button ${isEnabled ? 'enabled' : 'disabled'}`;  
                    steeringControls.className = isEnabled ? '' : 'control-disabled';  
                    
                    // 禁用时重置为中央位置  
                    if (!isEnabled) {  
                        steeringSlider.value = 0;  
                        steeringValue.textContent = '0.0';  
                    }  
                    break;  
                    
                case 'gear':  
                    // 更新挡位控制UI  
                    gearEnable.textContent = isEnabled ? '挡位已启用' : '挡位已禁用';  
                    gearEnable.className = `enable-button ${isEnabled ? 'enabled' : 'disabled'}`;  
                    gearControls.className = isEnabled ? '' : 'control-disabled';  
                    
                    // 禁用时重置为NONE挡  
                    if (!isEnabled) {  
                        gearButtons[currentGear].classList.remove('active');  
                        currentGear = 'NONE';  
                        gearButtons['NONE'].classList.add('active');  
                        gearValue.textContent = 'NONE';  
                        // updateParkingStatus();  // 更新挡位下面的“行驶中”和“泊车中”，废弃
                    }  
                    break;  
            }  
        }  
        
        /**  
         * @brief 更新泊车状态显示  
         *   
         * 根据当前挡位显示车辆状态：  
         * - P挡或NONE挡：显示"已泊车"（绿色）  
         * - 其他挡位：显示"行驶中"（橙色）  
         */  
        function updateParkingStatus() {  
            if (currentGear === 'P' || currentGear === 'NONE') {  
                parkingStatus.textContent = '已泊车';  
                parkingStatus.style.color = '#4CAF50';  // 绿色  
            } else {  
                parkingStatus.textContent = '行驶中';  
                parkingStatus.style.color = '#ff9800';  // 橙色  
            }  
        }  
        
        // ========== 驾驶模式管理 ==========  

         // ========== 泊车状态管理 ==========
        let parkingStatus = 'in_progress'; // 'in_progress' 或 'completed'
        
        // 获取泊车状态按钮
        const parkingInProgressBtn = document.getElementById('parking-in-progress');
        const parkingCompletedBtn = document.getElementById('parking-completed');
        const parkingStatusSelector = document.getElementById('parking-status-selector');
        
        // 泊车状态切换函数
        function setParkingStatus(status) {
            parkingStatus = status;
            
            // 更新按钮样式
            parkingInProgressBtn.classList.toggle('active', status === 'in_progress');
            parkingCompletedBtn.classList.toggle('active', status === 'completed');
            
            console.log(`泊车状态设置为: ${status === 'in_progress' ? '泊入进行中' : '泊入完成'}`);
            
            // 发送状态到后端
            sendParkingStatus();
        }
        
        // 绑定按钮点击事件
        parkingInProgressBtn.addEventListener('click', () => setParkingStatus('in_progress'));
        parkingCompletedBtn.addEventListener('click', () => setParkingStatus('completed'));
       
        
        /**  
         * @brief 切换驾驶模式  
         *   
         * 在泊车模式和行车模式之间切换：  
         * - 泊车模式：用于停车、泊车辅助等低速操作  
         * - 行车模式：用于正常驾驶  
         */  
        function toggleDriveMode() {  
            isDrivingMode = !isDrivingMode;  // 切换模式  
            
            if (isDrivingMode) {  
                // 切换到行车模式  
                driveMode.textContent = '行车模式';  
                driveMode.style.color = '#ff9800';  // 橙色  
                modeToggleBtn.textContent = '切换泊车模式';  
                modeToggleBtn.style.backgroundColor = '#ff9800';  
                modeDescription.textContent = '车辆可正常行驶，所有控制功能可用';  

                // 隐藏泊车状态选择器
                parkingStatusSelector.style.display = 'none';
            } else {  
                // 切换到泊车模式  
                driveMode.textContent = '泊车模式';  
                driveMode.style.color = '#4CAF50';  // 绿色  
                modeToggleBtn.textContent = '切换行车模式';  
                modeToggleBtn.style.backgroundColor = '#4CAF50';  
                modeDescription.textContent = '车辆已停止，可进行泊车操作';  

                 // 显示泊车状态选择器
                parkingStatusSelector.style.display = 'block';
                
                // 设置默认泊入进行中状态
                setParkingStatus('in_progress');
            }  
            
            sendControlData();  // 发送模式更新  
        }  

        // ========== 发送泊车状态到后端 ==========
        function sendParkingStatus() {
            if (!isConnected) return;
            
            const parkingData = {
                type: 'parking_status',
                status: parkingStatus,
                timestamp: Date.now()
            };
            
            socket.send(JSON.stringify(parkingData));
            console.log('发送泊车状态:', parkingStatus);
        }
    
        
        // ========== 控制器事件监听 ==========  
        
        /**  
         * @brief 油门滑块事件监听  
         * 当用户拖动油门滑块时触发  
         */  
        throttleSlider.addEventListener('input', function() {  
            if (!enableStates.throttle) return;  // 禁用时不响应  
            throttleValue.textContent = parseFloat(this.value).toFixed(2);  // 更新显示值  
            sendControlData();  // 发送数据  
        });  
        
        /**  
         * @brief 刹车滑块事件监听  
         * 当用户拖动刹车滑块时触发  
         */  
        brakeSlider.addEventListener('input', function() {  
            if (!enableStates.brake) return;  // 禁用时不响应  
            brakeValue.textContent = parseFloat(this.value).toFixed(2);  // 更新显示值  
            sendControlData();  // 发送数据  
        });  
        
        /**  
         * @brief 方向盘滑块事件监听  
         * 当用户拖动方向盘滑块时触发  
         */  
        steeringSlider.addEventListener('input', function() {  
            if (!enableStates.steering) return;  // 禁用时不响应  
            const value = parseFloat(this.value);  
            steeringValue.textContent = value.toFixed(2);  // 更新显示值  
            // 更新方向盘视觉效果（-1到1映射到-45度到45度）  
            sendControlData();  // 发送数据  
        });  
        
        /**  
         * @brief 挡位按钮事件监听  
         * 为每个挡位按钮添加点击事件  
         */  
        Object.keys(gearButtons).forEach(gear => {  
            gearButtons[gear].addEventListener('click', function() {  
                // 禁用时或点击当前挡位时不响应  
                if (!enableStates.gear || currentGear === gear) return;  
                
                // 更新挡位显示  
                gearButtons[currentGear].classList.remove('active');  // 移除当前挡位的激活状态  
                this.classList.add('active');  // 激活新挡位  
                currentGear = gear;  // 更新当前挡位  
                gearValue.textContent = gear;  // 更新显示  
                // updateParkingStatus();  // 更新泊车状态  
                
                sendControlData();  // 发送数据  
            });  
        });  
        
        // ========== 其他事件监听 ==========  
        
        // 驾驶模式切换按钮事件  
        modeToggleBtn.addEventListener('click', toggleDriveMode);  
        
        // 各控制器启用/禁用按钮事件  
        throttleEnable.addEventListener('click', () => toggleControl('throttle'));  
        brakeEnable.addEventListener('click', () => toggleControl('brake'));  
        steeringEnable.addEventListener('click', () => toggleControl('steering'));  
        gearEnable.addEventListener('click', () => toggleControl('gear'));  
        // connectButton.addEventListener('click',  function() {if (!isConnected) {connect();}});
        
        // ========== 定时数据发送 ==========
        
        /**
         * @brief 定期发送控制数据
         * 
         * 每100毫秒发送一次控制数据到后端，确保：
         * - 实时性：后端能及时收到最新的控制状态
         * - 心跳机制：保持连接活跃
         * - 状态同步：确保前后端状态一致
         */
        setInterval(sendControlData, 100);
        
        // ========== 全局控制按钮 ==========
        
        /**
         * @brief 创建全局控制面板
         * 
         * 动态创建"启用全部控制"和"紧急停止"按钮
         * 提供快速的全局控制功能
         */
        const globalControlPanel = document.createElement('div');
        globalControlPanel.style.cssText = `
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
        `;
        
        /**
         * @brief 启用全部控制按钮
         * 一键启用所有控制器（油门、刹车、方向盘、挡位）
         */
        const enableAllBtn = document.createElement('button');
        enableAllBtn.textContent = '全部启用';
        enableAllBtn.style.cssText = `
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        `;
        enableAllBtn.addEventListener('click', () => {
            // 启用所有控制器
            Object.keys(enableStates).forEach(control => {
                enableStates[control] = true;
                updateControlUI(control);
            });
            sendControlData();
        });
        
        /**
         * @brief 紧急停止按钮
         * 一键禁用所有控制器，用于紧急情况
         */
        const disableAllBtn = document.createElement('button');
        disableAllBtn.textContent = '紧急停止';
        disableAllBtn.style.cssText = `
            padding: 5px 10px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        `;
        disableAllBtn.addEventListener('click', () => {
            // 禁用所有控制器
            Object.keys(enableStates).forEach(control => {
                enableStates[control] = false;
                updateControlUI(control);
            });
            sendControlData();
        });


        // 添加连接开关按钮的触发事件
        connectToggle.addEventListener('change', function() {
            if (this.checked) {
                connect();
            } else {
                disconnect();
            }
        });

        
        // 将全局控制按钮添加到页面
        globalControlPanel.appendChild(enableAllBtn);
        globalControlPanel.appendChild(disableAllBtn);
        
        const connectionDiv = document.getElementById('connection-status');
        connectionDiv.parentNode.insertBefore(globalControlPanel, connectionDiv);
        
        // ========== 键盘控制功能 ==========
        
        /**
         * @brief 键盘按键状态跟踪
         * 
         * 使用对象来跟踪当前按下的按键，支持多键同时按下
         * 这样可以实现更流畅的键盘控制体验
         */
        const keysPressed = {};
        let keyControlInterval = null;  // 键盘控制循环的定时器

        /**
         * @brief 键盘按下事件处理
         * 
         * 监听以下按键：
         * - W/S: 控制油门
         * - A/D: 控制刹车  
         * - 左箭头/右箭头: 控制方向盘
         */
        document.addEventListener('keydown', function(event) {
            const key = event.key.toLowerCase();
            // 只处理车辆控制相关的按键
            if (['w', 's', 'a', 'd', 'arrowleft', 'arrowright'].includes(key)) {
                event.preventDefault();  // 阻止默认行为（如页面滚动）
                keysPressed[key] = true;  // 标记按键为按下状态
            }
        });

        /**
         * @brief 键盘释放事件处理
         * 
         * 当按键释放时，从按键状态中移除对应的按键
         */
        document.addEventListener('keyup', function(event) {
            const key = event.key.toLowerCase();
            if (['w', 's', 'a', 'd', 'arrowleft', 'arrowright'].includes(key)) {
                event.preventDefault();
                delete keysPressed[key];  // 移除按键状态
            }
        });

        /**
         * @brief 更新车辆控制状态
         * 
         * 根据当前按下的按键更新车辆控制状态：
         * - 自动启用相应的控制器
         * - 根据按键调整控制值
         * - 提供平滑的控制体验
         */
        function updateVehicleState() {
            let stateChanged = false;

            // ========== 油门控制 (W/S键) ==========
            if (keysPressed['w']) {
                // W键：增加油门
                if (!enableStates.throttle) { 
                    enableStates.throttle = true; 
                    updateControlUI('throttle'); 
                }
                const currentValue = parseFloat(throttleSlider.value);
                const newValue = Math.min(currentValue + parseFloat(throttleSlider.step), 1);
                throttleSlider.value = newValue;
                throttleValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            } else if (keysPressed['s']) {
                // S键：减少油门
                if (!enableStates.throttle) { 
                    enableStates.throttle = true; 
                    updateControlUI('throttle'); 
                }
                const currentValue = parseFloat(throttleSlider.value);
                const newValue = Math.max(currentValue - parseFloat(throttleSlider.step), 0);
                throttleSlider.value = newValue;
                throttleValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            }

            // ========== 刹车控制 (A/D键) ==========
            if (keysPressed['d']) {
                // D键：增加刹车
                if (!enableStates.brake) { 
                    enableStates.brake = true; 
                    updateControlUI('brake'); 
                }
                const currentValue = parseFloat(brakeSlider.value);
                const newValue = Math.min(currentValue + parseFloat(brakeSlider.step), 1);
                brakeSlider.value = newValue;
                brakeValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            } else if (keysPressed['a']) {
                // A键：减少刹车
                if (!enableStates.brake) { 
                    enableStates.brake = true; 
                    updateControlUI('brake'); 
                }
                const currentValue = parseFloat(brakeSlider.value);
                const newValue = Math.max(currentValue - parseFloat(brakeSlider.step), 0);
                brakeSlider.value = newValue;
                brakeValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            }

            // ========== 方向盘控制 (左右箭头键) ==========
            if (keysPressed['arrowright']) {
                // 右箭头：向右转
                if (!enableStates.steering) { 
                    enableStates.steering = true; 
                    updateControlUI('steering'); 
                }
                const currentValue = parseFloat(steeringSlider.value);
                const newValue = Math.min(currentValue + parseFloat(steeringSlider.step), 1);
                steeringSlider.value = newValue;
                steeringValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            } else if (keysPressed['arrowleft']) {
                // 左箭头：向左转
                if (!enableStates.steering) { 
                    enableStates.steering = true; 
                    updateControlUI('steering'); 
                }
                const currentValue = parseFloat(steeringSlider.value);
                const newValue = Math.max(currentValue - parseFloat(steeringSlider.step), -1);
                steeringSlider.value = newValue;
                steeringValue.textContent = newValue.toFixed(2);
                stateChanged = true;
            }

            // 如果有状态变化，发送控制数据
            if (stateChanged) {
                sendControlData();
            }
        }

        /**
         * @brief 启动键盘控制循环
         * 
         * 每50毫秒检查一次键盘状态并更新车辆控制
         * 这个频率确保了响应的实时性和流畅性
         */
        keyControlInterval = setInterval(updateVehicleState, 50);
        
        // ========== 快捷禁用功能 ==========
        
        /**
         * @brief Q/E键快捷禁用功能
         * 
         * 提供快速禁用控制器的功能：
         * - Q键：禁用油门控制
         * - E键：禁用刹车控制
         * - G键：禁用所有
         * 
         * 这些快捷键在紧急情况下特别有用
         */
        document.addEventListener('keydown', function(event) {
            // 防止方向键等导致页面滚动
            if(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'w', 'a', 's', 'd', 'W', 'A', 'S', 'D'].includes(event.key)) {
                // 这个处理已经在上面的监听器中完成
            }
            
            const key = event.key.toLowerCase();
            if (key === 'q') {
                // Q键：禁用油门
                if (enableStates.throttle) {
                    enableStates.throttle = false;
                    updateControlUI('throttle');
                    sendControlData();
                }
            } else if (key === 'e') {
                // E键：禁用刹车
                if (enableStates.brake) {
                    enableStates.brake = false;
                    updateControlUI('brake');
                    sendControlData();
                }
            } else if (key== 'g') {
                // G键：禁用所有
                if (enableStates.throttle || enableStates.brake || enableStates.steering) {
                    enableStates.throttle = false;
                    enableStates.brake = false;
                    enableStates.steering = false;
                    enableStates.gear = false;
                    updateControlUI('throttle');
                    updateControlUI('brake');
                    updateControlUI('steering');
                    updateControlUI('gear');
                    sendControlData();
                }
            }
        });
        
        // ========== 页面生命周期管理 ==========
        
        // 页面加载完成后的初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 根据初始驾驶模式状态决定是否显示泊车状态选择器
            if (isDrivingMode) {
                // 行车模式：隐藏泊车状态选择器
                parkingStatusSelector.style.display = 'none';
            } else {
                // 泊车模式：显示泊车状态选择器并设置默认状态
                parkingStatusSelector.style.display = 'block';
                // 延迟一点发送，确保WebSocket连接已建立
                setTimeout(() => {
                    setParkingStatus('in_progress');
                }, 1000);
            }
        });

        /**
         * @brief 页面关闭时的清理工作
         * 
         * 在用户关闭页面或刷新页面时：
         * - 清除定时器
         * - 关闭WebSocket连接
         * - 防止内存泄漏
         */
        window.addEventListener('beforeunload', function() {
            // 清除键盘控制定时器
            if (keyControlInterval) {
                clearInterval(keyControlInterval);
            }
            
            // 关闭WebSocket连接
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.close();
            }
        });
        
        // ========== 错误处理和调试 ==========
        
        /**
         * @brief 全局错误处理
         * 
         * 捕获JavaScript运行时错误，防止页面崩溃
         */
        window.addEventListener('error', function(event) {
            console.error('页面发生错误:', event.error);
            // 可以在这里添加错误上报或用户提示
        });
        
        /**
         * @brief 调试信息输出
         * 
         * 在开发模式下输出调试信息
         */
        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
            console.log('车辆控制面板已加载');
            console.log('支持的控制方式:');
            console.log('- 鼠标/触摸：拖动滑块和点击按钮');
            console.log('- 键盘：W/S(油门), A/D(刹车), ←/→(方向盘), Q/E(禁用)');
            console.log('- 全局控制：启用全部控制、紧急停止');
        }
        
    </script>
</body>
</html>
        
        